<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: ZachGmy
 * @LastEditTime: 2022-06-15 09:49:30
-->
<template>
  <div class="Hospital">
    <!-- 这是宣传照片 -->
    <div class="tittle">
      <h2>医疗救治定点医院和发热门诊一览</h2>
    </div>
    <!-- 医院搜素栏 -->
    <div style="margin-bottom: 25px" class="hospitalSerch">
      <el-input
        style="width: 400px"
        placeholder="请输入医院名称"
        v-model="input"
        clearable
      >
      </el-input>
      <el-button
        @click="getHosData"
        style="height: 40px; width: 60px;font-size=18px"
        type="primary"
        >搜索</el-button
      >
    </div>
    <!-- 医院列表展示 -->
    <div
      class="hospitalDetails"
      v-for="(item, index) in newTableData"
      @click="jumpMap(item)"
      :key="index"
    >
      <!-- 医院信息  -->
      <div style="flex: 1" class="hosInfo">
        <!-- 名称 -->
        <div class="name">{{ item.name }}</div>
        <!-- 描述 -->
        <div class="desc">{{ item.flags }}</div>
        <!-- 地址 -->
        <div class="address">{{ item.province }}</div>
      </div>
      <!-- 医院定位 -->
      <div class="hosLaction">
        <!-- 小图标 -->
        <img style="width: 30px" src="../assets/position.png" />
        <!-- 与当前定位距离 -->
        <div class="dis">{{ item.distance }}km</div>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      // 医院搜索的值
      input: "",
      // 医院详细信息
      newTableData: [],
      // 分页变量
      // 当前页码
      page: 1,
      // 每页展示数据条数
      pageSize: 4,
      // 数据总条数
      total: 6,
    };
  },
  methods: {
    // 分页
    handleCurrentChange(val) {
      this.page = val;
      this.getHosData();
      this.getLngLat();
    },
    // 获取医院相关信息
    async getHosData() {
      let params = {
        page: this.page,
        pageSize: this.pageSize,
        name: this.input,
      };
      let res = await get("/hospital/pageQuery", params);
      this.newTableData = res.data.list;
      this.getLngLat();
    },
    // 获取当前定位经纬度
    getLngLat() {
      // 将this的执行进行一个保存
      // 嵌套函数里面的this
      // 箭头函数里面的this
      let _this = this;
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量
          offset: [10, 20],
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: true,
          //  定位按钮的排放位置,  RB表示右下
          position: "RB",
        });

        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            onComplete(result);
          } else {
            onError(result);
          }
        });
        console.log(123);
        function onComplete(data) {
          // 获取到经度
          let longitude = data.position.lng;
          // 获取到纬度
          let latitude = data.position.lat;

          // 遍历医院信息数组，获取每一个医院与我们经纬度对比
          _this.newTableData.map((item) => {
            // 当前位置经纬度
            let p1 = [longitude, latitude];
            // 多有医院经纬度
            let p2 = [item.longitude, item.latitude];
            // 根据两个位置经纬度，获取他们之间距离
            let dis = AMap.GeometryUtil.distance(p1, p2);
            console.log(dis);
            // $set(目标对象，要添加的属性名，要添加属性值)
            _this.$set(item, "distance", (dis / 1000).toFixed(1));
          });
        }

        function onError(data) {
          // 定位出错
        }
      });
    },
    jumpMap(item) {
      this.$router.push({
        path: "/hospital/map",
        query: item,
      });
    },
  },
  created() {
    this.getHosData();
    this.getLngLat();
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.tittle {
  width: 100%;
  height: 130px;
  background: url(../assets/bgi.png) no-repeat;
  border-radius: 5px;
}
.tittle h2 {
  color: white;
  line-height: 130px;
  margin-left: 20px;
}
.hospitalSerch {
  margin-top: 10px;
}
.hospitalDetails {
  margin-top: 10px;
  display: flex;
  border-bottom: 1px solid #dbdcdf69;
}
.hospitalDetails .hosInfo {
}
.hospitalDetails .hosInfo .name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}
.hospitalDetails .hosInfo .desc {
  display: inline-block;
  background-color: #ffb34e;
  color: white;
  font-size: 18px;
  border-radius: 5px;
  padding: 0.1em;
  margin-bottom: 5px;
}
.hospitalDetails .hosInfo .address {
  color: #999999;
  margin-bottom: 10px;
}
</style>
